<template>
	<view class="search-input-container">
		<view class="tags-container" @tap="handleContainerClick">
			<template v-if="type === 'multiple'">
				<view class="tag" v-for="(item, index) in selectedItems" :key="index">
					{{ item }}
					<text class="tag-close" @tap.stop="removeTag(index)">×</text>
				</view>

				<input class="search-input" type="text" v-model="keyword" :placeholder="getPlaceholder"
					@input="handleInput" @focus="showDropdown = true" @blur="handleBlur" />
			</template>
			<template v-else>
				<view class="single-select-content">
					<view class="selected-value">{{ selectedValue.length>0?selectedValue:'' || placeholder }}</view>
					<view class="arrow-icon" :class="{ 'is-reverse': showDropdown }">▼</view>
				</view>
			</template>
		</view>
		<view class="dropdown-list" v-if="showDropdown && filteredOptions.length">
			<view class="dropdown-item" v-for="(item, index) in filteredOptions" :key="index"
				@tap.stop="selectOption(item)">
				<text>{{ item }}</text>
				<text class="checkbox">{{ isSelected(item) ? '✓' : '' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SearchSelect',
		props: {
			options: {
				type: Array,
				default: () => []
			},
			placeholder: {
				type: String,
				default: '請輸入關鍵字搜尋'
			},
			type: {
				type: String,
				default: 'multiple',
				validator: value => ['multiple', 'single'].includes(value)
			},
			modelValue: {
				type: [Array, String],
				default () {
					return this.type === 'multiple' ? [] : '';
				}
			}
		},
		data() {
			return {
				keyword: '',
				showDropdown: false,
				selectedItems: this.type === 'multiple' ? (Array.isArray(this.modelValue) ? this.modelValue : []) : [],
				selectedValue: this.type === 'single' ? (this.modelValue || '') : ''
			}
		},
		computed: {
			getPlaceholder() {
				if (this.type === 'multiple') {
					return this.selectedItems.length ? '' : this.placeholder;
				}
				return this.keyword || this.selectedValue ? '' : this.placeholder;
			},
			filteredOptions() {
				return this.options.filter(option =>
					option.toLowerCase().includes(this.keyword.toLowerCase())
				);
			}
		},
		watch: {
			modelValue: {
				handler(newVal) {
					if (this.type === 'multiple') {
						this.selectedItems = Array.isArray(newVal) ? newVal : [];
					} else {
						this.selectedValue = newVal;
					}
				},
				deep: true
			}
		},
		mounted() {
			document.addEventListener('click', this.handleOutsideClick);
		},
		beforeDestroy() {
			document.removeEventListener('click', this.handleOutsideClick);
		},
		methods: {
			handleInput(e) {
				this.$emit('update:modelValue', this.keyword);
				this.showDropdown = true;
			},
			selectOption(option) {
				if (this.type === 'multiple') {
					const index = this.selectedItems.indexOf(option);
					if (index === -1) {
						this.selectedItems.push(option);
					} else {
						this.selectedItems.splice(index, 1);
					}
					this.$emit('update:modelValue', this.selectedItems);
					this.$emit('change', this.selectedItems);
				} else {
					this.selectedValue = option;
					this.$emit('update:modelValue', this.selectedValue);
					this.$emit('change', this.selectedValue);
				}
				this.keyword = '';
				this.showDropdown = false;
			},
			removeTag(index) {
				if (this.type === 'multiple') {
					this.selectedItems.splice(index, 1);
					this.$emit('update:modelValue', this.selectedItems);
					this.$emit('change', this.selectedItems);
				}
			},
			isSelected(option) {
				return this.type === 'multiple' ?
					this.selectedItems.includes(option) :
					this.selectedValue === option;
			},
			handleBlur() {
				setTimeout(() => {
					this.showDropdown = false;
				}, 200);
			},
			handleOutsideClick(event) {
				const container = event.target.closest('.search-input-container');
				if (!container && this.showDropdown) {
					this.showDropdown = false;
				}
			},
			handleContainerClick(event) {
				event.stopPropagation();
				if (this.type === 'single') {
					this.showDropdown = !this.showDropdown;
				}
			}
		}
	}
</script>

<style>
	.search-input-container {
		position: relative;
		margin-bottom: 20rpx;
		width: 280rpx;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
		padding: 12rpx 16rpx;
		height: auto;
		min-height: 80rpx;
		border: 2rpx solid #dcdfe6;
		border-radius: 8rpx;
		align-items: flex-start;
		width: 100%;
		box-sizing: border-box;
		transition: border-color 0.2s ease;
		cursor: pointer;
	}

	.tag {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		background-color: #f4f4f5;
		padding: 6rpx 14rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		
		line-height: 1.2;
		color: #909399;
		border: 1rpx solid #e9e9eb;
		transition: all 0.2s ease;
		max-width: calc(100% - 16rpx);
		word-break: break-all;
		white-space: normal;
	}

	.tag:hover {
		background-color: #909399;
		color: white;
		border-color: #909399;
	}

	.tag-close {
		margin-left: 12rpx;
		cursor: pointer;
		padding: 0 4rpx;
		font-size: 32rpx;
		transition: color 0.2s ease;
	}

	.tag-close:hover {
		color: #f56c6c;
	}

	.search-input {
		flex: 1;
		min-width: 60rpx;
		height: 56rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		
		line-height: 56rpx;
	}

	.dropdown-list {
		position: absolute;
		top: calc(100% + 10rpx);
		left: 0;
		width: 280rpx;
		background: #fff;
		border: 2rpx solid #dcdfe6;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		max-height: 400rpx;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.dropdown-item {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.dropdown-item:hover {
		background-color: #f4f4f5;
	}

	.dropdown-item:active {
		background-color: #e9e9eb;
	}

	.checkbox {
		color: #909399;
		font-weight: bold;
	}

	.selected-value {
		flex: 1;
		padding: 8rpx 16rpx;
		font-size: 28rpx;
		color: #333;
		min-height: 56rpx;
		line-height: 56rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 56rpx;
		display: flex;
		align-items: center;
	}

	.selected-value:empty::before {
		content: attr(placeholder);
		color: #999;
	}

	.arrow-icon {
		flex-shrink: 0;
		margin-right: 8rpx;
		color: #c0c4cc;
		font-size: 24rpx;
		transition: transform 0.3s;
	}

	.arrow-icon.is-reverse {
		transform: rotate(180deg);
	}

	@media screen and (min-width: 960px) {
		.search-input-container {
			width: 100%;
			margin-bottom: 0rpx;
		}
		.dropdown-list {
			width: 100%; 
		}
	}

	.single-select-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 56rpx;
	}

	.selected-value {
		flex: 1;
		padding: 0 16rpx;
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.arrow-icon {
		flex-shrink: 0;
		margin-right: 8rpx;
		color: #c0c4cc;
		font-size: 24rpx;
		transition: transform 0.3s;
		display: flex;
		align-items: center;
	}
</style>